<template>
	<view class="v-pages">
		<view class="pages-container">
			<v-button :disabled="currentPage <= 1" @click="changePage(currentPage - 1)" size="small">上一页</v-button>
			<template v-for="(page, index) in pageList" :key="index">
				<view v-if="page === '...'" class="page-item" :class="{ active: currentPage === page }" style="cursor: default; color: #ccc">
					{{ page }}
				</view>
				<view v-else class="page-item" :class="{ active: page === currentPage }" @click="changePage(page)">
					{{ page }}
				</view>
			</template>
			<v-button :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)" size="small">下一页</v-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, inject } from 'vue';

const props = defineProps({
	total: {
		type: Number,
		default: 0
	},
	pageSize: {
		type: Number,
		default: 10
	},
	currentPage: {
		type: Number,
		default: 1
	},
	pageRange: {
		type: Number,
		default: 3
	}
});

const emit = defineEmits(['update:currentPage', 'change']);

const config = inject<any>('config');
const totalPages = computed(() => {
	return Math.ceil(props.total / props.pageSize);
});

const pageList = computed(() => {
	const list = [];
	const totalPage = totalPages.value;
	const maxPagesToShow = props.pageRange * 2 + 1;

	if (totalPage <= maxPagesToShow) {
		for (let i = 1; i <= totalPage; i++) {
			list.push(i);
		}
	} else {
		const startPage = Math.max(1, props.currentPage - props.pageRange);
		const endPage = Math.min(totalPage, props.currentPage + props.pageRange);

		if (startPage > 1) {
			list.push(1);
			if (startPage > 2) {
				list.push('...');
			}
		}

		for (let i = startPage; i <= endPage; i++) {
			list.push(i);
		}

		if (endPage < totalPage - 1) {
			list.push('...');
			if (endPage < totalPage) {
				list.push(totalPage);
			}
		}
	}

	return list;
});

const changePage = (page: number) => {
	if (page < 1 || page > totalPages.value) return;
	emit('update:currentPage', page);
	emit('change', page);
};
</script>

<style lang="scss" scoped>
.v-pages {
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
}

.pages-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-item {
	width: 45rpx;
	height: 45rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 5rpx;
	border-radius: 6rpx;
	background-color: v-bind('config.backgroundColor.reversal');
	cursor: pointer;
	transition: all 0.3s;
	border: 1px solid v-bind('config.border.color');

	&:hover {
		border-color: v-bind('config.border.default');
	}

	&:disabled {
		cursor: not-allowed;
		opacity: v-bind('config.opacity.disabled');
		border-color: v-bind('config.border.color');
	}

	&.active {
		background-color: v-bind('config.backgroundColor.default');
		color: v-bind('config.fontColor.reversal');
		border-color: v-bind('config.border.default');
	}

	&.page-item--no-border {
		border: none;
		box-shadow: none;
		background-color: transparent;
	}

	&.page-item--no-bg {
		background-color: transparent;
	}
}
</style>
